<template>
	<view >
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="问题详情"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">
		
		</view>
		<view class="" style="width: 92%;margin: 0 auto;padding-top: 15px;position: relative;z-index: 1;">
			<view class="" >
				<view style="background-color: #fff;  padding: 15px;border-radius: 10px;">
					<view class="">
						<text style="font-size: 15px;font-weight: 500;color: #333333;">{{info.type_text}}</text>
						<view class="">
							<text style="font-size: 12px;font-weight: 400;color: #666666;">{{info.updatetime}}</text>
							<text style="font-size: 12px;font-weight: 400;color: #666666;padding-left: 23px;">{{user.username}}</text>
						</view>
					</view>
					<view class="" style="padding: 15px 0;">
						<fold-text :text="contant" :lineCount="3" :fontSize="28" />
					</view>
					<view style=" display: flex">
						<u-image
							@click="prev(i)"
							style="margin-right: 10px"
							v-for="(it, i) in info.images"
							:key="i"
							width="80px"
							height="80px"
							:src="$imgurl + it"
							:lazy-load="true"
						></u-image>
					</view>
					<!-- <view class="flex" style="margin-top: 20px">
						<image style="width: 28px; margin-right: 10px; border-radius: 50%" :src="user.avatar" mode="widthFix"></image>
						<view style="font-size: 14px; color: #1d1f20">{{ user.username }}</view>
						<view style="margin-left: 15px; color: #939494">{{ info.createtime }}提问</view>
					</view> -->
				</view>
				<view style="background-color: #fff; border-radius: 10px;  margin-top: 15px;padding: 15px;">
					<view style="font-size: 14px">客服回复：</view>
					<view style="
							padding: 15px;
							background-color: #F5FAFF;
							border-radius: 10px;
							margin-top: 10px;
							font-size: 14px;
							word-wrap: break-word;
							white-space: normal;
							word-break: break-all;
						"
					>
						{{ info.reply != '' ? info.reply : '暂未回复' }}
					</view>
					<view v-if="info.reply_images != ''" style="margin-top: 20px; display: flex">
						<u-image
							@click="prev_img(i)"
							style="margin-right: 10px"
							v-for="(it, i) in info.reply_images"
							:key="i"
							width="80px"
							height="80px"
							:src="$imgurl + it"
							:lazy-load="true"
						></u-image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contant: ``,
				info: '',
				user: '',
				bgColor: 'rgba(255,255,255,0)',
			};
		},
		onLoad(e) {
			this.detail(e.id);
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = 'rgba(255,255,255,1)'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		methods: {
			prev(i) {
				let a = [];
				for (let i = 0; i < this.info.images.length; i++) {
					a.push(this.$imgurl + this.info.images[i]);
				}
				uni.previewImage({
					current: i, // 当前显示图片的索引值
					urls: a, // 需要预览的图片列表，photoList要求必须是数组
					loop: true, // 是否可循环预览
				});
			},
			prev_img() {
				let a = [];
				for (let i = 0; i < this.info.reply_images.length; i++) {
					a.push(this.$imgurl + this.info.reply_images[i]);
				}
				uni.previewImage({
					current: i, // 当前显示图片的索引值
					urls: a, // 需要预览的图片列表，photoList要求必须是数组
					loop: true, // 是否可循环预览
				});
			},
			async detail(id) {
				let res = await this.$http.car.feedback_detail({
					feedback_id: id,
				});
				this.info = res.data;
				this.user = res.data.user;

				this.contant = res.data.content;
			},
		},
	};
</script>

<style scoped lang="scss">
	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}
</style>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>
